<template>
    <div id="swiper">
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide v-for="item in adv" :key='item.id'>
              <a :href="item.linkUrl" target="_blank">
                  <img :src="item.pictureUrl" alt="" style="width:100%;height:400px;">
              </a>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
            <div class="swiper-scrollbar"></div>
        </swiper>
    </div>


</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import {mapGetters,mapActions} from 'vuex';
export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        notNextTick: true,
        loop: true,
        autoplay: 4000,
        autoplayDisableOnInteraction: false,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next"
      },
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  computed:{
    ...mapGetters(['adv'])
  },
  created() {
    this.$store.dispatch('getAdv');
  }
};
</script>